<template>
  <div class="single-list-filter-wrapper" @click.stop="clickBlank()">
    <div class="top-text-wrapper" @click.stop="showSingleListDialog()">
      <p class="left-select-text">{{placeHolderText}}</p>
      <div class="arrow-down-img" :class="{'arrow-up-img': showDropDown}"/>
    </div>
    <div class="drop-down-wrapper" v-show="showDropDown">
      <div class="li-single-filter-wrapper ul-single-filter-wrapper">
        <ul class="ul-filter-list-wrapper">
          <!--<li>
            <div class="single-filter-object-all">
              <check-box :checkDataItem="{name:'全部',value:'all'}"></check-box>
            </div>
          </li>-->
          <div v-if="type=='hospLevel'">
            <li>
              <div class="single-filter-object">
                <check-box :checkDataItem="firstItem"
                           ref="totalCheckBox"
                           :checked="checkedF"
                           :isParent="true"
                           :isBelongToParentWhich="0"
                           :onlyCode="getOnlyCode()"
                           :isParentLinkChild="isParentLinkChild"
                           :isReset='isReset'
                >
                </check-box>
              </div>
            </li>
            <li v-for="(item,index) in dataList" v-if="index>0">
              <div class="single-filter-object">
                <check-box :checkDataItem="item"
                           @checkListener="checkListener"
                           :singlehospitalLevel="index"
                           :isParent="false"
                           :isBelongToParentWhich="0"
                           :onlyCode="getOnlyCode()"
                           :isParentLinkChild="isParentLinkChild"
                           :isReset='isReset'
                >
                </check-box>
              </div>
            </li>
          </div>
          <li v-else v-for="(item,index) in dataList">
            <div class="single-filter-object">
              <check-box :checkDataItem="item"></check-box>
            </div>
          </li>
        </ul>
      </div>
      <div class="divider-line-filter"></div>
      <div class="confirm-btm-wrapper">
        <p class="single-confirm-btn" @click.stop="clickConfirm()">确定</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import CheckBox from './check-box/check-box.vue'
  import {bus} from './js/bus.js';
  const TAG = 'singleListFilter'
  export default {
    components: {
      CheckBox
    },
    props: {
      singleListData: {
        type: Array,
        default() {
          return []
        }
      },
      defaultText: {
        type: String,
        default() {
          return '请选择'
        }
      },
      filter: {
        type: Object,
        default: null
      },
      type: {
        type: String,
        default: null
      },
      isParentLinkChild: {
        // 一级标题是否与二级标题联动
        type: Boolean,
        default() {
          return false
        }
      },
      isReset: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    created() {
      bus.$on('pageChange', () => {
        console.log('pageChange......uid===' + this._uid)
        this.showDropDown = false;
        this.clickConfirmBtn = false
        this.loadFilterData()
        setTimeout(() => {
          this.clickConfirm()
        }, 50)
      })
      bus.$on('filterIsShowing', (uid) => {
        if (this.showDropDown && uid == this.$parent._uid) {
          console.log('single-list-filter  ddddddddd111')
          this.loadFilterData()
        }
      })
      bus.$on('showDropDownDialog', (emitTag) => {
        if (emitTag == this._uid) {
          // 显示待选项
          this.showDropDown = !this.showDropDown
          if (this.showDropDown) {
            this.loadFilterData();
          }
        } else {
          this.showDropDown = false
        }
      });
    },
    data() {
      return {
        placeHolderText: this.defaultText,
        currentSelectPosition: -1,
        showDropDown: false,
        firstItem: {},
        dataList: [],
        isTotal: false,
        checkedF: false
      }
    },
    methods: {
      loadFilterData() {
        if (this.clickConfirmBtn) {
          this.dataList = []
          setTimeout(() => {
//                console.log('this.lastConfirmDataList==' + JSON.stringify(this.lastConfirmDataList))
            this.dataList = JSON.parse(JSON.stringify(this.lastConfirmDataList));
            this.firstItem = JSON.parse(JSON.stringify(this.lastFirstItem))
            if (this.$refs.totalCheckBox) {
              this.$refs.totalCheckBox.setChecked(this.firstItem.checked)
            }
//                console.log('this.dataList==' + JSON.stringify(this.dataList))
          }, 10)
        } else {
//              console.log('this.defaultDataList==' + JSON.stringify(this.defaultDataList))
          this.dataList = []
          setTimeout(() => {
            this.dataList = JSON.parse(JSON.stringify(this.defaultDataList));
            this.firstItem = JSON.parse(JSON.stringify(this.defaultFirstItem))
            if (this.$refs.totalCheckBox) {
              this.$refs.totalCheckBox.setChecked(this.firstItem.checked)
            }
          }, 10)
        }
      },
      getOnlyCode(){
        return this._uid
      },
      checkListener(self, isChecked){
//        this.isTotal = false;
//        console.log('当前所属子元素个数：' + this.getChildrenLengthByIndex(self.isBelongToParentWhich))
//        console.log('dataList.length===' + this.dataList.length)
        if (this.isParentLinkChild) {
          if (this.dataList.length - 1 === this.getChildrenLengthByIndex(self.isBelongToParentWhich)) {
            this.$refs.totalCheckBox.setChecked(true)
          } else {
            this.$refs.totalCheckBox.setChecked(false);
          }
        }
      },
      getChildrenLengthByIndex(index) {
        // 获取二级标题选择的个数
        let chooseList = [];
        this.dataList.forEach((item, index) => {
          // index为0时，为全部按钮，不包含在二级标题内
          if (index !== 0) {
            if (item.checked) {
              chooseList.push(item.selectId)
            }
          }
        });
        return chooseList.length
      },
//      chooseTotal(isChecked){
//        //选择全部
//        this.isTotal = isChecked;
//      },
      selectCurrentSingleObject(item, index) {
        // 选择列表项目
        this.placeHolderText = item.name
        this.currentSelectPosition = index
      },
      showSingleListDialog() {
        // 通过发送时间消息显示当前下拉框，关闭其他下拉框
        bus.$emit('showDropDownDialog', this._uid)
      },
      //点击确定是传回选中的id值
      clickConfirm() {
        let chooseList = [];
        this.dataList.map((item, index) => {
          if (item.checked && item.selectId && item.selectId.length > 0) {
            chooseList.push(item.selectId)
          }
        })
        if (chooseList.length == 0) {
          if (this.type == 'hospLevel') {
            this.$message({
              message: '医院等级不能为空',
              center: true,
              type: 'info',
            });
          }
        } else {
          // 点击了确定标识
          this.clickConfirmBtn = true
          this.lastConfirmDataList = JSON.parse(JSON.stringify(this.dataList))
          this.lastFirstItem = JSON.parse(JSON.stringify(this.firstItem))

          this.$emit('confirmSingleSelect', chooseList)
          this.showDropDown = false
        }
      },
      clickBlank() {
      },
      getDataFromFilter() {
        if (this.type == 'insuredType') {
          this.dataList = this.filter.nc.insuredType;
        } else if (this.type == 'hospLevel') {
          this.dataList = this.filter.nc.hospitalRankType;
          this.firstItem = this.dataList[0]
          // 医院等级三级医院置为选择状态
          this.dataList.forEach((item, index) => {
            if (index == 1) {
              item.checked = true
            } else {
              item.checked = false
            }
          })
        }

        // 默认值
        this.defaultFirstItem = JSON.parse(JSON.stringify(this.firstItem))
        this.defaultDataList = JSON.parse(JSON.stringify(this.dataList))
      }
    },
    mounted(){
      document.querySelector('body').addEventListener("click", () => {
        this.showDropDown = false
      });
      if (this.filter) {
        this.getDataFromFilter()
      }
    },
    watch: {
      filter(val) {
        console.log('single-list-filter  filter发生变化')
        if (val) {
          this.getDataFromFilter()
        }
      },
      isReset(val){
        if (val) {
          let data = JSON.parse(JSON.stringify(this.dataList))
          data.map((item, index) => {
            if (index == 1) {
              item.isChecked = true;
            } else {
              item.isChecked = false;
            }
          })
          this.dataList = data;
        }
      }
    }
  };
</script>

<style lang="scss">
  @import "topFilter.css";

</style>
